<template>
    <div class="big_box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>物资管理</el-breadcrumb-item>
            <el-breadcrumb-item>维修物品</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>

        <el-form :model="form_maintenance">
            <el-row :gutter="10">
                <el-col :span="3">
                    <el-select  placeholder="请选择维修人" v-model="form_maintenance.UserId">
                        <el-option value=" " label="全部"></el-option>
                        <el-option v-for="v in $store.state.AllUsers" :value="v.Id" :label="v.UserName"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-select placeholder="请选择维修类型" v-model="form_maintenance.MaintenanceType">
                        <el-option :value="0" label="全部"></el-option>
                        <el-option :value="1" label="设备"></el-option>
                        <el-option :value="2" label="汽车"></el-option>
                        <el-option :value="3" label="未知"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-select placeholder="请选择维修状态" v-model="form_maintenance.State">
                        <el-option :value="0" label="全部"></el-option>
                        <el-option :value="1" label="正在维修"></el-option>
                        <el-option :value="2" label="维修完毕"></el-option>
                        <el-option :value="3" label="未知"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="2">
                    <el-button   icon="el-icon-search"  @click="formdata"></el-button>
                </el-col>
            </el-row>
        </el-form>

        <el-row style="padding: 10px 0px">
            <el-col :span="12">
                <el-button-group>
                    <el-button class="buttongroup"  type="success" icon="el-icon-circle-plus-outline" @click="AddMaintenance_dialog=true">新增</el-button>
                    <el-button class="buttongroup" type="danger" icon="el-icon-delete" @click="BatchDelete_event">批量删除</el-button>
                </el-button-group>
            </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
            <el-col :span="24">
                <el-table :data="tableData" border stripe style="width: 100%" @selection-change="SelectionChange_event">
                    <el-table-column type="selection" width="40" align="center"></el-table-column>
                    <el-table-column fixed type="index" label="序号" width="50" align="center" :index="indexMethod"></el-table-column>
                    <el-table-column fixed prop="MaintenanceNumber" label="维修编号" align="center"></el-table-column>
                    <el-table-column fixed prop="Id" label="维修人" width="120" show-overflow-tooltip align="center">
                        <template slot-scope="slot">
                            {{ GetParentDeviceCategory(slot.row.Id) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="MaintenanceType" label="维修类型" show-overflow-tooltip align="center">
                        <template slot-scope="slot">
                            <label v-if="slot.row.MaintenanceType ==1">设备</label>
                            <label v-if="slot.row.MaintenanceType ==2">汽车</label>
                            <label v-if="slot.row.MaintenanceType ==3">未知</label>
                        </template>
                    </el-table-column>
                    <el-table-column prop="MaintenanceId " label="维修物品" show-overflow-tooltip align="center">
                        <template slot-scope="slot">
                            {{ GetarrMaintenance(slot.row) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="StartDate" label="开始时间" show-overflow-tooltip align="center">
                        <template slot-scope="slot">
                            {{ PurchaseDate_conversion(slot.row.StartDate) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="EndDate" label="结束时间" show-overflow-tooltip align="center">
                        <template slot-scope="slot">
                            {{ PurchaseDate_conversion(slot.row.EndDate) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="MaintenanceAmount" label="维修金额" show-overflow-tooltip align="center"></el-table-column>
                    <el-table-column prop="State" label="状态" show-overflow-tooltip align="center">
                        <template slot-scope="slot">
                            <label v-if="slot.row.State==1">正在维修</label>
                            <label v-if="slot.row.State==2">维修完毕</label>
                            <label v-if="slot.row.State==3">未知</label>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="145" align="center">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" plain   type="primary" size="mini">编辑</el-button>
                            <el-button type="danger" size="mini"       plain   @click="BatchDeleteOne_event(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="24">
                <div class="block">
                    <el-pagination
                            @size-change="formdata"
                            @current-change="formdata"
                            :current-page.sync="pagination.currentPage"
                            :page-sizes="pagination.pagesizes"
                            :page-size.sync="pagination.pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total.sync="pagination.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>

        <el-dialog :visible.sync="AddMaintenance_dialog" title="添加维修记录" width="80%">
            <AddMaintenance ></AddMaintenance>
        </el-dialog>

        <el-dialog :visible.sync="UpdataMaintenance_dialog" title="修改维修记录" width="80%">
            <UpadtaMaintenance :maintenance="MainTenance_details"></UpadtaMaintenance>
        </el-dialog>

    </div>
</template>

<script>
    import * as publicjs from "/public/Scriput/Public";
    import AddMaintenance from "./AddMaintenance";
    import UpadtaMaintenance from "./UpadtaMaintenance";

    export default {
        name: "MainTenance",
        components: {
            'AddMaintenance': AddMaintenance,
            'UpadtaMaintenance': UpadtaMaintenance
        },
        data() {
            return {
                //表格查询数据
                form_maintenance: {
                    UserId: '',
                    MaintenanceType: 0,
                    State: 0,
                },
                //表格数据
                tableData: [],
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [10, 20, 30, 40, 50],
                    pagesize: 10,
                    total: 100
                },
                //表格选中的数据
                SelectMore_lis: [],
                //所有物资
                AllDevice: [],
                //所有汽车
                AllVehicle: [],
                //添加表格记录弹框
                AddMaintenance_dialog: false,
                //单个数据详情,用于编辑
                MainTenance_details: {},
                //修改表格记录弹框
                UpdataMaintenance_dialog: false,
            }
        },
        created() {
            this.AllDevice = publicjs.GetAllDevice(this.$http)
            this.AllVehicle = publicjs.GetAllVehicle(this.$http)
            this.formdata()
        },
        methods: {
            //初始化表格数据加载
            formdata() {
                let loadding = this.openLoading();
                this.$http.post('Maintenance/GetMaintenanceContent', {
                    currentPage: this.pagination.currentPage,
                    pagesize: this.pagination.pagesize,
                    maintenance: this.form_maintenance,
                }).then(res => {
                    loadding.close();
                    this.pagination.total = res.data.count
                    this.tableData = res.data.data
                }).catch(() => {
                    this.$message.error('服务器异常,请联系管理员!')
                })
            },
            //表格数据选择事件
            SelectionChange_event(value) {
                this.SelectMore_lis = value
            },
            //批量删除
            BatchDelete_event() {
                this.$confirm('你确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    let arrDel = []
                    if (this.SelectMore_lis.length > 0) {
                        this.SelectMore_lis.forEach(item => {
                            arrDel.push(item.Id)
                        })
                        let loadding = this.openLoading();
                        this.$http.post('Maintenance/DeleteMaintenanceContent', arrDel).then(res => {
                            loadding.close();
                            if (res) {
                                this.$message.success('删除成功!')
                                this.SelectMore_lis = []
                                this.formdata()
                            } else {
                                this.$message.success('删除失败,请重试!')
                            }
                        }).catch(() => {
                            this.$message.info('服务器异常,请联系管理员!')
                        })
                    } else {
                        this.$message.warning('没有选中的数据!')
                    }
                }).catch(() => {
                    this.$message.info('已取消!')
                })
            },
            //序列号
            indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },
            //编辑
            handleClick(obj) {
                this.MainTenance_details = obj
                this.UpdataMaintenance_dialog = true
            },
            //单个数据删除
            BatchDeleteOne_event(obj) {
                this.SelectMore_lis.push(obj)
                this.BatchDelete_event()
            },
            //添加弹框取消
            AddDeviceCategory_close() {
                this.$refs['AddDeviceCategory_ref'].form_resetField()
            },
            //返回父级分类
            GetParentDeviceCategory(val) {
                for (let i = 0; i < this.$store.state.AllUsers.length; i++) {
                    if ((this.$store.state.AllUsers)[i].Id == val) {
                        return (this.$store.state.AllUsers)[i].UserName
                    }
                }
            },
            //维修物品数据
            GetarrMaintenance(d) {
                var result = "";
                var arrMaintenanceId = [];
                arrMaintenanceId = d.MaintenanceId.split(",");
                if (d.MaintenanceType == 1) {   //
                    this.AllDevice.forEach(v => {
                        arrMaintenanceId.forEach(vv => {
                            if (v['Id'] == vv) {
                                if (result.length >= 0) {
                                    result += v["DeviceName"];
                                } else {
                                    result += ("," + v["DeviceName"]);
                                }
                                return false;
                            }
                        })
                    })
                }
                else if (d.MaintenanceType == 2) {//result = "汽车";
                    this.AllVehicle.forEach(v => {
                        arrMaintenanceId.forEach(vv => {
                            if (v["Id"] == vv) {
                                //result = "汽车型号:" + v["CarModel"] + "车牌号:" + v["LicensePlate"];
                                if (result.length <= 0) {
                                    result += v["LicensePlate"];
                                }
                                else {
                                    result += ("," + v["LicensePlate"]);
                                }
                                return false;
                            }
                        })
                    })
                }
                else {
                    result = "未知";
                }
                return result;
            },
            //创建时间转化
            PurchaseDate_conversion(val) {
                return (val.split(' '))[0]
            },
        }
    }
</script>

<style scoped>

</style>
